<template>
    <!-- 顶部统一navbar -->
    <div class="nav-header">
        <div class="location-box">  
        </div>
        <div class="nav-center">
            <img src="https://zd-1252113827.cos.ap-guangzhou.myqcloud.com/20211223/1622707475647-7ba2c32b-84c1-485c.png" class="header-img" alt="">
        </div>
        <div class="message-help-box">
            <div class="message-fox">
            <div class="message-tips" v-if="messageNum>0"></div>
            <img class="header-icon-l" src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20211224/1640316561459-e3cbbf42-9f70-4950.png" alt="" @click="$router.push({path:'/messageList'})">
            </div>
            
            <img class="header-icon-l" src="https://huijin-1304525164.cos.ap-guangzhou.myqcloud.com/upload/public/20211224/1640316585578-e4222234-dfee-49c6.png" alt="" @click="$router.push({path:'/hlep'})">
        </div>
    </div>   
    <!-- 顶部统一navbar end -->

</template> 

<script>
export default {
  props: {
      
  },
  data() {
    return {
       messageNum:this.$store.state.messageNum, 
    };
  },
  watch: {
    
  },  
  mounted() {
   

  },
  beforeDestroy() {
  }, 
  methods: {
    goHelp(){
      this.$router.push({path:'/hlep'})
    }
  }
};
</script> 
<style lang="less" scoped> 
.header-img{
    width: 100px;
    height: 30px;
    display: block;
}
.header-icon{
    width:14px;
    height: 16px;
    margin-right: 9px;
    display: block;
}
.nav-header{
    width: 7.5rem;
    height: 40px;
    padding: 0 30px;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .location-box{
      display: flex;
      align-items: center;
      font-weight: bold; 
      min-width:50px ;
    }
    .message-help-box{
      display: flex;
      .message-fox{
        position: relative;
        .message-tips{
          position: absolute;
          width: 8px;
          height: 8px;
          top: -1px;
          right: -1px;
          border-radius: 50%;
          background: #FABE00;
        }
        img{
          width: 17px;
          height: 17px;
        }
      }
      &>img{
        margin-left: 12px;
        width: 17px;
        height: 17px;
      }
    }
  }
</style> 
